<template>
  <div>
    <div style="margin: 0 10px 16px">
      <span style="margin-right: 10px">授权方式</span>
      <el-radio-group v-model="form.authMethod" placeholder="请选择授权状态">
        <el-radio label="offline">线下授权</el-radio>
        <el-radio label="elec">电子授权</el-radio>
      </el-radio-group>
    </div>

    <el-form v-show="form.authMethod == 'offline'" :model="form" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="姓名" prop="name">
        <el-input
          style="width: 260px"
          v-model="form.name"
          placeholder="请输入姓名"
          clearable
        />
      </el-form-item>
      <el-form-item label="身份证" prop="idNumber">
        <el-input
          style="width: 260px"
          v-model="form.idNumber"
          placeholder="请输入身份证"
          clearable
        />
      </el-form-item>
      <el-form-item label="手机号" prop="tel">
        <el-input
          style="width: 260px"
          v-model="form.tel"
          placeholder="请输入手机号"
          clearable
        />
      </el-form-item>
      <el-form-item label="选择报告">
        <product @choose="handleChoose" :tips="false"></product>
      </el-form-item>
      <el-form-item label="授权示例">
        <div>
          <div style="font-size: 12px; margin-bottom: 5px; color: rgb(112, 112, 112);"> *
            使用线下授权原则上请使用本示例作为授权书模板，签写时保持纸张整洁并字迹清晰。
          </div>
          <div style="display: flex;justify-content: start;align-items: end">
<!--  -->
            <img style="height: 180px;width: 300px;" src="http://chaxun.rongyica.com/prod-api/file/auth.png" />
            <button @click="down" type="button">下载模版</button>
          </div>
        </div>
      </el-form-item>
      <div style="display: flex;justify-content: end">
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </el-form>
    <p v-show="form.authMethod == 'elec'">
      <elecAuth />
    </p>
  </div>

</template>

<script>
  import product from "@/views/system/beidiao/product.vue"
  import elecAuth from "@/views/system/beidiao/add/elecAuth.vue"

  import {offlineAuth} from "@/api/system/beiDiao"
  import {validateIdNo, validatePhone} from "@/utils/validate"

  export default {
    name: "new",
    components: {product, elecAuth},
    data() {
      return {
        // 查询参数
        form: {
          authMethod: 'offline',
          name: null,
          idNumber: null,
          tel: null,

          // name: '王江南',
          // idNumber: '510181198908154211',
          // tel: '18190943657',

          productId: null
        },

        rules: {
          name: [
            {required: true, min: 2, max: 20, message: '姓名长度必须介于 2 和 20 之间', trigger: 'blur'},
          ],
          idNumber: [
            {required: true, validator: validateIdNo, trigger: 'blur'}
          ],
          tel: [
            {required: true, validator: validatePhone, trigger: 'blur'}
          ]
        },
      }
    },

    methods: {
      down() {
        window.open('http://chaxun.rongyica.com/prod-api/file/%E7%94%B5%E5%AD%90%E6%8E%88%E6%9D%83%E4%BF%A1%E6%81%AF%E6%9F%A5%E8%AF%A2%E6%8E%88%E6%9D%83%E4%B9%A6.pdf', '_blank');
      },
      handleChoose(data) {
        // 处理子组件传来的数据
        this.form.productId = data
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            offlineAuth(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.$emit('addSuccess');
            });
          }
        });
      },
    }
  }
</script>

